<template>
  <div class="homePage">
    <my-header name-page="RePOS bot" />
    <div class="homePage__block">
      <div class="homepage__block__btn">
        <button-page name-button="Balance" route-path="/balance" />
        <button-page name-button="Settings" route-path="/settings" />
        <!--				<button-page name-button="Traders" route-path="/tradersList" />-->
        <!--				<button-page name-button="Statistics" />-->
        <!--				<button-page name-button="Instruction" route-path="/instruction" />-->
      </div>
    </div>
  </div>
</template>

<script>
import ButtonPage from "@/components/BtnPage.vue";
import MyHeader from "@/components/UI/MyHeader.vue";

export default {
  name: "homePage",
  components: { ButtonPage, MyHeader },
};
</script>

<style scoped>
.homePage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.homePage__block {
  margin-top: 20%;
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.homepage__block__btn {
  margin: 0 0 20px 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 25px;
}
</style>
